<template>
  <div class="contact">
    <MyHeader />
    <div>
      <Row>企业联系人</Row>
      <Form class="contact_company" label-position="left" :label-width="100"  ref="contact" :model="contact">
        <FormItem label="姓名" prop='name' :rules="validator.chinese" >
          <Input v-model="contact.name" type="text" :maxlength="15" placeholder="请输入姓名" @on-focus="contactSelect" @on-blur="contactBlur" @on-change="contactChange"></Input>
          <ul class="box" v-if="isContactShow">
            <li class="title" v-for="(option, index) in personList" :key="index" v-on:click="isSelect(option,contact,isContactShow)">
              <p v-html="option.name"></p>
            </li>
          </ul>
        </FormItem>
        <FormItem label="证件号码" prop='cerno' :rules="validator.cerno" >
          <Input v-model="contact.cerno" type="text" placeholder="请输入身份证号码" :maxlength="18"></Input>
        </FormItem>
        <FormItem label="移动电话" prop='mobile' :rules="[validator.must, validator.telphone ]" >
          <Input v-model="contact.mobile" type="text" placeholder="请输入移动电话" :maxlength="11"></Input>
        </FormItem>
        <FormItem label="固定电话" prop='tel'>
          <Input v-model="contact.tel" type="text" placeholder="请输入固定电话"></Input>
        </FormItem>
        <FormItem label="电子邮箱" prop='email'>
          <Input v-model="contact.email" type="text" placeholder="请输入电子邮箱"></Input>
        </FormItem>
        </Form>
        <div class="contact_space"></div>
        <Row>财务负责人</Row>
        <Form class="contact_company" label-position="left" :label-width="100"  ref="finance" :model="finance">
        <FormItem label="姓名" prop='name' :rules="validator.chinese" >
          <Input v-model="finance.name" type="text" :maxlength="15" placeholder="请输入姓名" @on-focus="financeSelect" @on-blur="financeBlur" @on-change="financeChange"></Input>
          <ul class="box" v-if="isFinanceShow">
            <li class="title" v-for="(option, index) in personList" :key="index" v-on:click="isSelect(option,finance,isFinanceShow)">
              <p v-html="option.name"></p>
            </li>
          </ul>
        </FormItem>
        <FormItem label="证件号码" prop='cerno' :rules="validator.cerno" >
          <Input v-model="finance.cerno" type="text" placeholder="请输入身份证号码" :maxlength="18"></Input>
        </FormItem>
        <FormItem label="移动电话" prop='mobile' :rules="[validator.must,validator.telphone ]" >
          <Input v-model="finance.mobile" type="text" placeholder="请输入移动电话" :maxlength="11"></Input>
        </FormItem>
        <FormItem label="固定电话" prop='tel'>
          <Input v-model="finance.tel" type="text" placeholder="请输入固定电话"></Input>
        </FormItem>
        <FormItem label="电子邮箱" prop='email'>
          <Input v-model="finance.email" type="text" placeholder="请输入电子邮箱"></Input>
        </FormItem>
      </Form>
    </div>
    <div class="contact_bottom">
      <div class="bottom">
        <Button type="warning" @click="saveInfo('contact', 'finance', false)">保存</Button>
        <Button type="primary" @click="gotoNext('contact', 'finance', true)">下一步</Button>
      </div>
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import MyHeader from '../../components/MyHeader.vue'
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  import validator from '../../utils/validatorUtil.js'
  export default {
    data() {
      return {
        validator,
        personList: [],
        isContactShow: false,
        isFinanceShow: false,
        contact: {},
        finance: {}
      }
    },
    components: {
      MyHeader,
      MyFooter
    },
    methods: {
      contactSelect() {
        this.contactChange()
      },
      contactBlur() {
        this.isContactShow = false
      },
      contactChange() {
        if (this.contact.linkman) {
          this.isContactShow = false
        } else {
          this.isContactShow = true
        }
      },
      financeSelect() {
        this.financeChange()
      },
      financeBlur() {
        this.isFinanceShow = false
      },
      financeChange() {
        if (this.finance.linkman) {
          this.isFinanceShow = false
        } else {
          this.isFinanceShow = true
        }
      },
      isSelect(option, person, state) {
        state = false
        person.name = option.name
        person.cerno = option.cerno
        person.mobile = option.mobtel
      },
      queryPersonList() {
        request.get('/interface/apply/cp/setup/queryPersonList.do', {gid: sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          this.personList = response.data.data
        })
      },
      queryContactList() {
        request.get('/interface/apply/cp/setup/queryContactList.do', {gid: sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            let list = response.data.data
            if (list[0].linktype === '1') {
              this.contact = list[0]
              this.finance = list[1]
            } else {
              this.contact = list[1]
              this.finance = list[0]
            }
          }
        })
      },
      save(name1, name2, isNext) {
         this.$refs[name1].validate((valid) => {
          if (valid) {
            this.$refs[name2].validate((valid) => {
              if (valid) {
                let contactList = []
                this.contact.certype = '10'
                this.finance.certype = '10'
                contactList[0] = this.contact
                contactList[1] = this.finance
                let postData = new FormData()
                postData.append('contactList', JSON.stringify(contactList))

                request.post('/interface/apply/cp/setup/updateContact.do', postData
                  ).then(response => {
                    if (response.data.result === 'error') {
                      this.$ErrorAlert(response.data.message)
                    } else if (response.data.result === 'success') {
                        if (isNext) {
                        this.$router.push({name: 'FileUpload'})
                      } else {
                        this.$SuccessAlert('保存成功')
                      }
                    }
                  })
              }
            })
          }
        })
      },
      saveInfo(name1, name2, isNext) {
        this.save(name1, name2, isNext)
      },
      gotoNext(name1, name2, isNext) {
        this.save(name1, name2, isNext)
      }
    },
    mounted() {
      this.queryPersonList()
      this.queryContactList()
    }
  }

</script>

<style lang="scss">
  .contact {
    position: relative;
    min-height: 100%;
    padding-bottom: 4rem;
    >div {
      background: #fff;
      &:last-child {
        background: #f3f3f3;
      }
      .ivu-row {
        padding: 0 0.54rem;
        height: 1.75rem;
        line-height: 1.75rem;
        color: #00b3ff;
        border-bottom: 1px solid #dedede;
      }
      .ivu-form-item {
        margin-bottom: 0;
        border-bottom: 1px solid #dedede;
        .box{
          position: absolute;
          top: 1.75rem;
          z-index: 11;
          width: 100%;
          li{
            width: 100%;
            background: gainsboro;
            border: 1px solid #fff;
            font-size: .72rem;
            height: 1.75rem;
            line-height: 1.75rem
          }
        }
        label {
          height: 1.75rem;
          font-size: 0.57rem;
          line-height: 1.75rem;
          padding: 0 0 0 0.54rem;
        }
        input {
          height: 1.75rem;
          font-size: 0.57rem;
          border-top: none;
          border-bottom: none;
          border-right: none;
          border-radius: 0;
          text-align: right;
          &:hover {
            border: none;
          }
          &:focus {
            border: none;
            box-shadow: none;
          }
          &::-webkit-input-placeholder {
            text-align: right;
          }
          &::-moz-placeholder {
            text-align: right;
          }
          &:-ms-input-placeholder {
            text-align: right;
          }
        }
      }
    }
    &_space {
      height: 0.54rem;
      background: #f3f3f3;
    }
    &_company {
      &-select {
        .ivu-form-item-content {
          float: right;
          text-align: right;
          .ivu-select-selection {
            border: none;
            box-shadow: none;
            height: 100%;
            .ivu-select-selected-value {
              height: 1.75rem;
              line-height: 1.75rem;
              font-size: 0.57rem;
              padding-left: 0;
            }
            .ivu-select-placeholder {
              height: 1.75rem;
              line-height: 1.75rem;
              font-size: 0.57rem;
              padding-left: 0;
            }
          }
        }
      }
    }
    &_bottom {
      padding-top: 5%;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 3.5rem;
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
